<script>
  export default {
    onLaunch() {

    },
    onShow() {},
    onHide() {}
  }
</script>

<style lang="less">
  /*每个页面公共css */
  view,
  scroll-view,
  button,
  navigator {
    box-sizing: border-box !important;
    font-size: 28upx;
  }

  view,
  input {
    box-sizing: border-box;
  }

  rich-text {
    line-height: 48upx;
  }

  /* #ifdef MP-TOUTIAO */
  page,
  body,
  tt-view,
  tt-scroll-view,
  tt-button,
  tt-navigator {
    box-sizing: border-box !important;
    font-size: 28upx;
  }

  tt-rich-text {
    line-height: 48upx;
  }

  /* #endif */

  .page {
    position: relative;
    background: #EFFFF5;
    overflow-y: scroll;
  }

  .button {
    min-width: 120upx;
    padding: 8upx 16upx;
    border: 2upx solid #666;
    border-radius: 8upx;
    text-align: center;
  }

  .page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* #ifdef H5 */
  uni-page-body,
  uni-page-refresh {
    height: 100%;
  }

  .page {
    height: 100%;
  }

  /* #endif */

  .sub {
    font-size: .5em;
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200upx;
    height: 66upx;
    background: #91CFFF;
    border: 4upx solid black;
    border-radius: 10upx;
    font-size: 32upx;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
  }

  .line-btn {
    width: 100%;
  }

  .highlight {
    color: black;
  }

  .contact {
    @size: 64upx;
    position: fixed;
    right: 16upx;
    top: 340upx;
    width: @size;
    line-height: @size;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 4upx #666;
    padding: 0;
    font-size: 24upx;

    &:after {
      border: none;
    }
  }

  .categorys {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .category {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 240upx;
      color: white;
      background: url(http://file.kvker.com/a122e504699a06628671/rubbish_category_icon.png) 0 0 ~'/'400% auto no-repeat;

      &:after {
        border: 0;
      }

      &:nth-child(2) {
        background-position-x: 33.3%;
      }

      &:nth-child(3) {
        background-position-x: 66.7%;
      }

      &:nth-child(4) {
        background-position-x: 100%;
      }
    }
  }

  .fab {
    position: fixed;
    bottom: 280upx;
    right: 32upx;
    display: flex;
    justify-content: center;
    align-items: center;
    @size: 80upx;
    width: @size;
    height: @size;
    border-radius: 50%;
    background: white;
    border: 4upx solid #161616;
  }
</style>
